/* 清除标签默认边距 */

body,
ul,
li,
ol,
img {
    margin: 0;
    padding: 0;
}


/* 清除 ul 等标签前面的“小圆点” */

ul,
li,
ol {
    list-style-type: none;
}


/* 图片自适应 */

img {
    width: 100%;
    height: auto;
    border: none;
    /* ie8 */
    display: block;
    -ms-interpolation-mode: bicubic;
    /*为了照顾ie图片缩放失真*/
}


/* 轮播图最外层盒子 */

.carousel {
    position: relative;
    overflow: hidden;
}

.carousel ul {
    /* 这个高度需要在JS里面动态添加 */
}

.carousel ul li {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    /* 使用 transform:translaX(300%) 暂时将 li 移动到屏幕外面去*/
    -webkit-transform: translateX(300%);
    transform: translateX(300%);
}


/* 小圆点盒子 */

.carousel .points {
    /* 未知宽度的盒子，使用 absolute 定位，结合 transform 的方式进行居中 */
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
}


/* 小圆点 */

.carousel .points li {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #fff;
    float: left;
    margin: 0 2px;
}


/* 选中小圆点的样式类 */

.carousel .points li.active {
    background-color: #fff;
}

.carousel ul li p.answer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 0 60px 0 60px;
    box-sizing: border-box;
}

.carousel ul li p.answer span {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.carousel ul li p.answer span.left {
    float: left;
}

.carousel ul li p.answer span.right {
    float: right;
}

.carousel ul li p.title {
    color: #fff;
    position: absolute;
    top: -24px;
    left: 0;
    font-size: 20px;
    width: 100%;
    text-align: center;
    z-index: 1000;
}

.carousel ul li p.answer span.active {
    background-color: aqua;
}